<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>缴费记录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no,email=no" name="format-detection">
		<!--[if lt IE 9]> 
		<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]-->
		<script type="text/javascript" src="../../js/init.js"></script>
		<link rel="stylesheet" href="../../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<script type="text/javascript" src="../../font/iconfont.js"></script>
		<style type="text/css">
			#btns {
				position: absolute;
				font-size: 0.3rem;
				width: 100%;
				height: 0.7rem;
				border-bottom: 1px solid #dbdbdb;
				color: #666;
				background-color: #f6f6f6;
			}
			
			#btns text {
				display: inline-block;
				position: absolute;
				width: 50%;
				height: 0.7rem;
				line-height: 0.7rem;
				text-align: center;
				font-size: 0.3rem;
			}
			#btns #left {
				left: 0;
			}
			#btns #right {
				right: 0;
			}
			.color {
				color: #2fabd4;
				border-bottom: 2px solid #428bca;
			}
			.bg {
				display: block;
				height: 1.1rem;
				background-color: #fff;
			}
			#divs .div {
				display: none;
			}
			.div button {
				color: #fff;
				background-color: #428bca;
				border-radius: 0.1rem;
				text-align: center;
				font-size:0.3rem; 
				width: 7.1rem;
				height: 0.7rem;
				line-height: 0.7rem;
				margin: 0 0.2rem;
				border: none;
			}
			.div text {
				display: block;
				text-align: center;
				font-size: 0.3rem;
				color: #333;
				line-height: 0.74rem;
				height: 0.74rem;
				border-bottom: 1px solid #eee;
				border-top: 1px solid #eee;
			}
		</style>
		<script type="text/javascript">
			 window.onload = function() {
            var btns = document.getElementById("btns").getElementsByTagName("text");
            var divs = document.getElementById("divs").getElementsByClassName("div");
            for (var i = 0; i < btns.length; i++) {
                btns[i].index = i; //自定义属性，用于关联下面的大盒子
                btns[i].onclick = function() {

                    for (var j = 0; j < btns.length; j++) {
                        //把所有的button清空类名
                        btns[j].className = "";
                    }
                    //点击的那个盒子添加指定类名
                    this.className = "color";
                    for (var i = 0; i < divs.length; i++) {
                        //先让底下的div全部隐藏
                        divs[i].style.display = "none";
                    }
                    //然后给当前所点击按钮相关联的盒子添加指定属性
                    divs[this.index].style.display = "block";
                }
            }
        }
		</script>
	</head>
	<body>
		<header>
			<span></span>
			<text class="title">缴费记录</text>
			<text class="iconfont icon-llmainpageback" id="back"></text>
			<text class="iconfont icon-iconfontclosesmall"></text>
			<text class="iconfont icon-gengduo"></text>
		</header>
		 <section class="contain">
	        <div id="btns">
	            <text class="color" id="left">查询门诊缴费</text>
	            <text id="right">住院押金补缴</text>
	        </div>
	        <span class="bg"></span>
	        <div id="divs">
	            <div class="div" style="display: block;">
	            	<text>缴费日期：2017/06/12——2017/07/12</text>
	            	<button id="InquiryOutpatient">查询门诊缴费</button>
	            </div>
	            <div class="div">
	            	<text>缴费日期：2017/06/12——2017/07/12</text>
	            	<button id="">住院押金补缴</button>
	            </div>
	        </div>
	    </section>
	</body>
	<script type="text/javascript">
		
		document.getElementById("InquiryOutpatient").onclick = function(){
			console.log("haha")
			 window.location.href="InquiryOutpatientPayment.html?backurl="+window.location.href; 
		}
		document.getElementById("hospitalDeposit").onclick = function(){
			console.log("haha")
			 window.location.href="InquiryOutpatientPayment.html?backurl="+window.location.href; 
		}
	</script>
</html>
